Description

Fixes two issues in updateFloatingCompareBar() that caused DOM element accumulation and fragile event listener re-binding on repeated compare mode toggling. The floating compare bar is now fully removed from DOM when no users are selected, and button clicks are handled via event delegation instead of individual addEventListener calls.

Linked Issue

Fixes #225

Changes Made

• clearSelectedUsers() path: Changed bar.style.display = "none" to bar.remove() — the bar element is now fully removed from DOM when no users are selected instead of just hidden
• Event delegation: Replaced three individual addEventListener calls on buttons with a single delegated click listener on the bar element, bound only once when the bar is first created. The listener uses e.target.closest("button") to route clicks to the correct handler (clearSelectedUsers, toggleCompareMode, or openCompareModal)
• When compare mode is re-activated, document.getElementById() returns null (bar was removed), so a fresh bar is created with a single fresh delegated listener — clean slate every time

Type of Change

• Bug fix
• New feature
• UI/Visual update
• Documentation update
• Refactor

Testing

• Tested locally
• Tested on mobile viewport (if applicable)
• No console errors introduced
• Verified with npx prettier --check frontend/js/leaderboard/compare.js

Checklist

• My code follows the project's coding style
• I have formatted my code locally by running npx prettier --write . before submitting
• I am submitting my PR from a dedicated feature/* branch, not the main branch
• I have performed a self-review of my code
• My changes generate no new warnings or errors
• I have updated documentation if required
• I have linked the relevant issue

Screenshots / Screen Recording

N/A — no visual change, same behavior with cleaner DOM lifecycle.